<template>
  <el-dialog
    append-to-body
    title="修改"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <vxe-form
      :data="form"
      :items="formConfig.items"
      :rules="formConfig.rules"
      :title-align="formConfig.titleAlign"
      title-colon
      :title-width="formConfig.titleWidth"
      @submit="submit"
    >
      <template #dclass>
        <vxe-select
          v-model="form.dclass"
          clearable
          filterable
          :options="dclassOptions"
          placeholder="请选择"
        />
      </template>
    </vxe-form>
  </el-dialog>
</template>

<script>
  import { deepClone } from '@/utils'
  export default {
    data() {
      return {
        dialogVisible: false,
        dclassOptions: [
          { label: '高', value: 1 },
          { label: '中', value: 2 },
          { label: '低', value: 3 },
        ],
        form: {
          gdate: '',
          level1: '',
          level2: '',
          level3: '',
          level4: '',
        },
        formConfig: {
          titleWidth: 110,
          titleAlign: 'right',
          items: [
            {
              field: 'gdate',
              title: '时间',
              span: 12,
              itemRender: {
                name: '$input',
                props: { type: 'date', placeholder: '时间', clearable: true },
              },
            },
            {
              field: 'temp_avg',
              title: '平均温度',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '平均温度(℃)',
                  clearable: true,
                },
              },
            },
            {
              field: 'temp_low',
              title: '最低温度',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '最低温度(℃)',
                  clearable: true,
                },
              },
            },
            {
              field: 'temp_high',
              title: '最高温度',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '最高温度(℃)',
                  clearable: true,
                },
              },
            },
            {
              field: 'rainfall',
              title: '降雨量',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '降雨量(mm)',
                  clearable: true,
                },
              },
            },
            {
              field: 'wind_spd',
              title: '风速',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '风速(m/s)',
                  clearable: true,
                },
              },
            },
            {
              field: 'radiation',
              title: '太阳辐射',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '太阳辐射(MJ/m²d)',
                  clearable: true,
                },
              },
            },
            {
              field: 'humidity',
              title: '湿度',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '湿度(%)',
                  clearable: true,
                },
              },
            },
            {
              field: 'pressure',
              title: '大气压',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '大气压(kPa)',
                  clearable: true,
                },
              },
            },
            {
              field: 'et0',
              title: 'ET0',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: 'ET0(mm)',
                  clearable: true,
                },
              },
            },
            {
              field: 'temp_acc',
              title: '积温',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '积温(℃)',
                  clearable: true,
                },
              },
            },
            {
              field: 'sunshine_acc',
              title: '日照时长',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '日照时长(h)',
                  clearable: true,
                },
              },
            },
            {
              span: 24,
              align: 'left',
              className: 'pl110',
              itemRender: {
                name: '$buttons',
                children: [
                  {
                    props: {
                      type: 'submit',
                      content: '提交',
                      icon: 'vxe-icon-search',
                      status: 'primary',
                    },
                  },
                  {
                    props: {
                      type: 'reset',
                      content: '重置',
                      icon: 'el-icon-document',
                    },
                  },
                ],
              },
            },
          ],
          rules: {
            gdate: [{ required: true, message: '请选择时间' }],
          },
        },
      }
    },
    methods: {
      show(row) {
        this.dialogVisible = true
        this.form = deepClone(row)
      },
      submit() {
        console.log(this.form)
        this.$baseMessage('操作成功', 'success')
      },
    },
  }
</script>

<style lang="scss" scoped></style>
